<template>
  <div class="wrapper">
    <el-card>
      <el-row>
        <el-col>
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="日期">
              <el-date-picker
                type="daterange"
                clearable
                v-model="state.value1"
                @change="chooseTimeRange"
                range-separator="至"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="状态">
              <el-select
                v-model="state.waretype"
                @change="getOrderlist"
                clearable
                placeholder="选择订单状态"
              >
                <el-option label="全部" value="100"></el-option>
                <el-option label="待审核" value="5"></el-option>
                <el-option label="待支付" value="4"></el-option>
                <el-option label="新订单" value="0"></el-option>
                <el-option label="已发货" value="3"></el-option>
                <el-option label="已完成" value="2"></el-option>
                <el-option label="已拒绝" value="6"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item style="width: 120px">
              <el-select
                v-model="state.order_type"
                @change="getOrderlist"
                clearable
              >
                <template v-for="item in state.order_type_arr" :key="item.id">
                  <el-option :label="item.name" :value="item.id"></el-option>
                </template>
              </el-select>
            </el-form-item>
            <el-form-item style="width: 120px">
              <el-select
                v-model="state.dls_type"
                @change="getOrderlist"
                clearable
              >
                <template v-for="item in state.dls_type_arr" :key="item.id">
                  <el-option :label="item.name" :value="item.id"></el-option>
                </template>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="tran_order">转发货单</el-button>
              <el-button type="primary" @click="export_order"
                >导出订单</el-button
              >
              <el-button type="primary" @click="set_order">新建订单</el-button>
            </el-form-item>
            <div style="float: right">
              <el-form-item>
                <searchDiv
                  :placeholder="state.placeholder"
                  @searchClick="searchClick"
                ></searchDiv
              ></el-form-item>
            </div>
          </el-form>
        </el-col>
      </el-row>
      <div class="order_list">
        <template v-for="(item, index) in state.result" :key="item.order_id">
          <table class="orderTb" border="1">
            <tr>
              <th class="w20"></th>
              <th class="w15"></th>
              <th class="w15"></th>
              <th class="w5"></th>
              <th class="w8"></th>
              <th class="w12"></th>
              <th class="w5"></th>
            </tr>
            <tbody>
              <tr>
                <td colspan="7" class="p-double">
                  <div class="navFlex">
                    <div class="flexleft">
                      <div class="nav-item">订单号:{{ item.order_number }}</div>
                      <div class="nav-item">
                        会员:{{ item.receiver_info.member_name }}({{
                          item.receiver_info.member_phone
                        }}){{ item.receiver_info.member_grade }}
                      </div>
                      <div class="nav-item">
                        订单类型:{{ item.order_status_display }}
                      </div>
                      <div class="nav-item">
                        所属代理:{{ item.receiver_info.agent_name }}
                      </div>
                      <div
                        class="nav-item"
                        style="display: flex; align-items: center"
                      >
                        <div>买家备注:{{ item.buyer_note }}</div>
                      </div>
                      <div class="nav-item" @click="openPge(item)">
                        折扣:{{ item.w_order_count }}
                      </div>
                    </div>
                    <div class="flexright">
                      <el-popover
                        placement="right"
                        :width="700"
                        title="客服备注"
                        trigger="hover"
                      >
                        <template #reference>
                          <div>客服备注</div>
                        </template>
                        <el-table :max-height="200" :data="item.records">
                          <el-table-column property="type" label="类型">
                          </el-table-column>
                          <el-table-column
                            property="user"
                            label="操作人"
                          ></el-table-column>
                          <el-table-column
                            property="create_time"
                            label="操作时间"
                          ></el-table-column>
                        </el-table>
                      </el-popover>
                    </div>
                  </div>
                </td>
              </tr>
              <!-- 循环tr -->
              <template v-for="(child, index) in item.goods_info">
                <tr>
                  <template v-if="index == 0">
                    <td>
                      <div
                        style="
                          display: flex;
                          align-items: center;
                          justify-content: space-between;
                        "
                      >
                        {{ child.good_name }}
                        <el-link type="danger" v-if="child.is_free_goods"
                          >赠货</el-link
                        >
                        <el-link type="warning" v-if="child.is_storage"
                          >已转赠货</el-link
                        >
                        {{ child.good_price }}x{{ child.good_count }}({{
                          child.goods_cartons
                        }}箱)
                      </div>
                    </td>
                    <td :rowspan="item.goods_info.length">
                      <div>
                        收货:{{ item.receiver_info.receiver_name }}({{
                          item.receiver_info.receiver_phone
                        }})
                      </div>
                      <div>门店名称:{{ item.receiver_info.member_store }}</div>
                      <div>地址:{{ item.receiver_info.receiver_address }}</div>
                      <div>
                        送货时间:<el-link type="warning">{{
                          item.expect_date
                        }}</el-link>
                      </div>
                    </td>
                    <td :rowspan="item.goods_info.length" align="left">
                      <div>
                        <el-row type="flex" justify="space-between">
                          <el-span :span="12">箱数:{{ item.cartons }}</el-span>
                          <el-span :span="12"
                            >重量:{{ item.order_weight }}kg
                          </el-span>
                        </el-row>
                      </div>
                      <div>
                        <el-row type="flex" justify="space-between">
                          <el-span :span="12"
                            >模板:{{ item.freight_name }}</el-span
                          >
                          <el-span :span="12"
                            >自提:{{ item.is_oneself ? "是" : "否" }}</el-span
                          >
                        </el-row>
                      </div>
                      <div>物流:{{ item.logistics }}</div>
                      <div>仓库:{{ item.warehouse_name }}</div>
                      <div>
                        单号:{{ item.logistics_bill }}
                        <el-button type="text" @click="editLog(item)"
                          >编辑
                        </el-button>
                      </div>
                    </td>
                    <td
                      :rowspan="item.goods_info.length"
                      align="center"
                      style="color: red"
                    >
                      <div v-if="item.order_status == 5">待审核</div>
                      <div v-if="item.order_status == 4">待支付</div>
                      <div v-if="item.order_status == 0">新订单</div>
                      <div v-if="item.order_status == 3">已发货</div>
                      <div v-if="item.order_status == 2">已完成</div>
                      <div v-if="item.order_status == 6">已拒绝</div>
                      <div v-if="item.order_status == 1">已取消</div>
                    </td>
                    <td :rowspan="item.goods_info.length">
                      <div>订单:{{ item.amount }}</div>
                      <div>应付:{{ item.pay_price }}</div>
                      <div>方式:{{ item.pay_by }}</div>
                      <div>原运费:{{ item.o_freight }}</div>
                      <div>
                        支付运费:{{ item.transport_fee }}
                        <el-button type="text" @click="edit_fee(item)"
                          >修改</el-button
                        >
                      </div>
                    </td>
                    <td align="left" :rowspan="item.goods_info.length">
                      <div>
                        下单:{{ item.creator_name }}{{ item.creator_time }}
                      </div>
                      <div>支付:{{ item.payer_name }}{{ item.payer_time }}</div>
                      <div>最后:{{ item.final_name }}{{ item.final_time }}</div>
                    </td>
                    <td align="center" :rowspan="item.goods_info.length">
                      <div>
                        <el-button type="text" @click="approveBtn(item)"
                          >操作</el-button
                        >
                      </div>
                      <div>
                        <el-button type="text">打印</el-button>
                      </div>
                      <div>
                        <el-button type="text" @click="refundBtn(item)"
                          >退款</el-button
                        >
                      </div>
                      <div>
                        <el-button type="text" @click="tranGift(item)"
                          >转赠货</el-button
                        >
                      </div>
                      <div>
                        <router-link
                          target="_blank"
                          :to="{
                            path: '/order_detail',
                            query: { order_id: item.order_number },
                          }"
                          >订单详情</router-link
                        >
                      </div>
                    </td>
                  </template>
                  <template v-else>
                    <td>{{ child.goods_name }}</td>
                  </template>
                </tr>
              </template>
            </tbody>
          </table>
        </template>
      </div>
      <Page
        v-if="state.totalPage"
        :totalPage="state.totalPage"
        @changePage="changePage"
      ></Page>
      <!-- 编辑物流操作 -->
      <el-dialog
        title="编辑"
        width="20%"
        v-model="state.edit_log_dialog"
        center
      >
        <div>
          <el-form
            ref="mutilform"
            :model="state.edit_form"
            :rules="state.rules"
            label-width="100px"
          >
            <el-form-item label="快递公司" prop="express_company">
              <el-select
                v-model="state.edit_form.express_company"
                placeholder="请选择快递公司"
              >
                <template
                  v-for="item in state.edit_form.warehouse_arr"
                  :key="item.express_code"
                >
                  <el-option
                    :label="item.express_name"
                    :value="item.express_code"
                  ></el-option>
                </template>
              </el-select>
            </el-form-item>
            <el-form-item label="快递单号" prop="note">
              <el-input
                type="text"
                v-model="state.edit_form.express_number"
                placeholder="请输入快递单号"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button @click="state.edit_log_dialog = false"
                >取 消</el-button
              >
              <el-button type="primary" @click="sub_edit_log()"
                >确 认</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </el-dialog>
      <!-- 编辑运费操作 -->
      <el-dialog title="编辑运费" width="20%" v-model="state.fee_dialog" center>
        <div>
          <el-form
            ref="mutilform"
            :model="state.edit_form"
            :rules="state.rules"
            label-width="100px"
          >
            <el-form-item label="运费" prop="fee">
              <el-input
                type="text"
                v-model="state.edit_form.fee"
                placeholder="请输入运费"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button @click="state.fee_dialog = false">取 消</el-button>
              <el-button type="primary" @click="sub_fee()">确 认</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-dialog>
      <!-- 转发货单 -->
      <el-dialog
        title="转发货单"
        width="40%"
        v-model="state.tran_order_dialog"
        center
      >
        <div>
          <el-row>
            <el-col :span="12">
              <searchDiv
                :placeholder="state.placeholder"
                @searchClick="tran_search"
              ></searchDiv
            ></el-col>
          </el-row>
          <el-table
            ref="multipleTable"
            :data="state.tran_obj.tran_data"
            tooltip-effect="dark"
            style="width: 100%"
            max-height="300"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection"> </el-table-column>
            <el-table-column prop="storage_type" label="订单类型" width="100">
            </el-table-column>
            <el-table-column prop="order_number" label="订单号" width="120">
            </el-table-column>
            <el-table-column label="收货地址">
              <template v-slot="scope">
                会员:{{ scope.row.receiver_info.member_name }} ({{
                  scope.row.receiver_info.member_phone
                }})-
                {{ scope.row.receiver_info.member_store }}
              </template>
            </el-table-column>
          </el-table>
          <el-row type="flex" justify="center" style="margin-top: 20px">
            <el-col :span="4">
              <el-button @click="state.tran_order_dialog = false"
                >取消</el-button
              >
            </el-col>
            <el-col :span="4"
              ><el-button @click="sub_tran_order" type="primary"
                >确定</el-button
              ></el-col
            >
          </el-row>
        </div>
      </el-dialog>
      <!-- 导出 -->
      <el-dialog
        title="选择发货模板"
        width="40%"
        v-model="state.export_dialog"
        center
      >
        <div>
          <el-table
            ref="multipleTable"
            :data="state.result"
            tooltip-effect="dark"
            style="width: 100%"
            max-height="300"
            @selection-change="export_select"
          >
            <el-table-column type="selection"> </el-table-column>
            <el-table-column prop="order_number" label="订单号">
            </el-table-column>
            <el-table-column label="收货人">
              <template v-slot="scope">
                <div>{{ scope.row.receiver_info.receiver_name }}</div>
              </template>
            </el-table-column>
            <el-table-column label="发货模板" width="150">
              <template v-slot="scope">
                <el-select v-model="scope.row.export_id">
                  <template
                    v-for="(item, key) of state.export_obj.export_ware_arr"
                    :key="item.id"
                  >
                    <el-option :label="item" :value="key"></el-option>
                  </template>
                </el-select>
              </template>
            </el-table-column>
          </el-table>
          <el-row type="flex" justify="center" style="margin-top: 20px">
            <el-col :span="4">
              <el-button @click="state.export_dialog = false">取消</el-button>
            </el-col>
            <el-col :span="4"
              ><el-button @click="sub_export_order" type="primary"
                >确定</el-button
              ></el-col
            >
          </el-row>
        </div>
      </el-dialog>
      <!-- 子组件 -->
      <Dialog :flag="show" @flagFun="flagFun" :title="state.approve.title">
        <!-- 新订单 -->
        <div v-if="state.approve.current_show == 'new_order'">
          <el-row type="flex" justify="center">
            <el-col :span="12"
              ><el-radio-group
                @change="agreeChange"
                v-model="state.approve.send_type"
                size="medium"
              >
                <el-radio :label="false">撤销</el-radio>
                <el-radio :label="true">发货</el-radio>
              </el-radio-group></el-col
            >
          </el-row>

          <el-form
            :model="opt_form"
            ref="opt_form"
            v-if="state.approve.send_type"
            label-width="80px"
          >
            <el-form-item label="快递公司" prop="express_company">
              <el-select
                key="express_company"
                v-model="state.approve.express_company"
                placeholder="请选择快递公司"
              >
                <template
                  v-for="item in state.approve.express_data_arr"
                  :key="item.id"
                >
                  <el-option
                    :label="item.express_name"
                    :value="item.express_code"
                  ></el-option>
                </template>
              </el-select>
            </el-form-item>
            <el-form-item label="快递单号" prop="express_num">
              <el-input
                key="express_num"
                placeholder="请输入快递单号"
                v-model="state.approve.express_num"
              ></el-input>
            </el-form-item>
          </el-form>
          <el-form :model="opt_form" ref="opt_form" v-else label-width="80px">
            <el-form-item label="原因" prop="reason">
              <el-select
                key="reason"
                v-model="state.approve.reason"
                placeholder="请选择原因"
              >
                <template
                  v-for="item in state.approve.reason_arr"
                  :key="item.id"
                >
                  <el-option :label="item.name" :value="item.id"></el-option>
                </template>
              </el-select>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input
                key="pwd"
                type="password"
                v-model="state.approve.password"
              ></el-input>
            </el-form-item>
          </el-form>

          <el-row type="flex" justify="center">
            <el-col :span="6">
              <el-button @click="show = false">取消</el-button>
            </el-col>
            <el-col :span="6">
              <el-button
                type="primary"
                @click="sub_new_order_opt(state.approve.send_type)"
                >确定</el-button
              >
            </el-col>
          </el-row>
        </div>
        <!-- 待审核 -->
        <div v-if="state.approve.current_show == 'wait_check'">
          <div style="padding: 20px; text-align: center">
            是否将此订单转成发货单?
          </div>
          <el-row type="flex" justify="center">
            <el-col :span="6">
              <el-button @click="show = false">取消</el-button>
            </el-col>
            <el-col :span="6">
              <el-button type="primary" @click="sub_wait_check">确定</el-button>
            </el-col>
          </el-row>
        </div>
        <!-- 待支付 -->
        <div v-if="state.approve.current_show == 'wait_pay'">
          <div style="padding: 20px; text-align: center">是否支付?</div>
          <el-row type="flex" justify="center">
            <el-col :span="6">
              <el-button @click="show = false">取消</el-button>
            </el-col>
            <el-col :span="6">
              <el-button type="primary" @click="sub_wait_pay">确定</el-button>
            </el-col>
          </el-row>
        </div>
        <!-- 已发货 -->
        <div v-if="state.approve.current_show == 'confirm_recieve'">
          <div style="padding: 20px; text-align: center">是否确认收货?</div>
          <el-row type="flex" justify="center">
            <el-col :span="6">
              <el-button @click="show = false">取消</el-button>
            </el-col>
            <el-col :span="6">
              <el-button type="primary" @click="sub_confirm_recive"
                >确定</el-button
              >
            </el-col>
          </el-row>
        </div>
        <!-- 已完成 -->
        <div v-if="state.approve.current_show == 'over_order'">
          <el-card class="box-card">
            <template #header>
              <div class="card-header">
                <span
                  >{{ state.approve.order_detail.goods_name }}等{{
                    state.approve.order_detail.goods_count
                  }}件商品 {{ state.approve.order_detail.delta_days }}天前</span
                >
              </div>
            </template>
            <el-row>
              <el-col :span="4">
                <el-avatar :size="size" :src="state.approve.imgUrl"></el-avatar>
              </el-col>
              <el-col :span="20"
                ><div style="height: 100%; display: flex; align-items: center">
                  {{ state.approve.order_detail.nickname }}
                </div></el-col
              >
            </el-row>
            <el-row>
              <el-col>{{ state.approve.order_detail.confirm_time }}</el-col>
            </el-row>
            <el-row>
              <el-col>{{ state.approve.order_detail.note }}</el-col>
            </el-row>
          </el-card>
        </div>
      </Dialog>
      <!-- 退款 -->
      <el-dialog title="退款" width="20%" v-model="state.refund_dialog" center>
        <div>
          <el-form
            ref="mutilform"
            :model="state.edit_form"
            :rules="state.rules"
            label-width="100px"
          >
            <el-form-item label="密码" prop="fee">
              <el-input
                type="password"
                v-model="state.refund"
                placeholder="请输入密码"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button @click="state.refund_dialog = false">取 消</el-button>
              <el-button type="primary" @click="confirm_refund()"
                >确 认</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </el-dialog>
      <!-- 转赠货 -->
      <el-dialog
        title="转赠货"
        width="20%"
        v-model="state.tran_gift_dialog"
        center
      >
        <div>
          <el-form
            ref="mutilform"
            :model="state.edit_form"
            :rules="state.rules"
            label-width="100px"
          >
            <el-form-item label="商品名称" prop="fee">
              <el-select v-model="state.gift_id">
                <template
                  v-for="item in state.gift_pro_arr"
                  :key="item.item_id"
                >
                  <el-option
                    :value="item.item_id"
                    :label="item.goods_name"
                  ></el-option>
                </template>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button @click="state.tran_gift_dialog = false"
                >取 消</el-button
              >
              <el-button type="primary" @click="confirm_gift()"
                >确 认</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </el-dialog>
      <!-- 新建订单弹窗 -->
      <el-drawer
        title="新建订单"
        v-model="state.set_form.set_dialog"
        :direction="direction"
        :before-close="handleClose"
        destroy-on-close
        size="50%"
      >
        <div class="conTxt">
          <el-drawer
            title="选择会员"
            :append-to-body="true"
            :before-close="handleClose"
            v-model="state.set_form.innerDrawer"
          >
            <div class="conTxt">
              <el-row>
                <el-col :span="12">
                  <searchDiv
                    :placeholder="请输入会员名"
                    @searchClick="vipSearch"
                  ></searchDiv>
                </el-col>
              </el-row>
              <el-table
                @row-click="rowClick"
                :data="state.set_form.vipGroup"
                height="250"
                border
                style="width: 100%"
              >
                <el-table-column prop="id" label="会员号"> </el-table-column>
                <el-table-column prop="customer_name" label="会员名称">
                </el-table-column>
                <el-table-column prop="customer_grade" label="会员等级">
                </el-table-column>
                <el-table-column prop="customer_balance" label="会员余额">
                </el-table-column>
              </el-table>
              <Page
                v-if="state.set_form.totalPage"
                :totalPage="state.set_form.totalPage"
                @changePage="vip_page"
              ></Page>
            </div>
          </el-drawer>
          <el-button type="text" disabled>会员信息</el-button>
          <el-form ref="form" :model="form">
            <el-form-item>
              <el-radio-group v-model="state.set_form.vip_type">
                <el-radio label="store">门店账户</el-radio>
                <el-radio label="agent">代理账户</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
          <el-form
            :inline="true"
            :model="formInline"
            class="demo-form-inline"
            label-width="100px"
          >
            <el-form-item label="会员ID">
              <el-input
                @click="open_child_drwer"
                v-model="state.set_form.vip_id"
                placeholder="请输入会员ID"
              ></el-input>
            </el-form-item>
            <el-form-item label="会员名称">
              <el-input
                disabled
                v-model="state.set_form.vip_name"
                placeholder="请输入会员名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="会员等级">
              <el-input
                disabled
                v-model="state.set_form.vip_level"
                placeholder="会员等级"
              ></el-input>
            </el-form-item>
            <el-form-item label="会员余额">
              <el-input
                disabled
                v-model="state.set_form.balance"
                placeholder="会员余额"
              ></el-input>
            </el-form-item>
          </el-form>
          <el-table max-height="300" :data="state.set_form.pro_table" border style="width: 100%">
            <el-table-column label="商品">
              <template v-slot="scope">
                <el-select @change="proChange($event,scope.$index)" v-model="scope.row.selected">
                  <el-option-group
                    v-for="group in state.set_form.pro_select_arr"
                    :key="group.value"
                    :label="group.label"
                  >
                    <el-option
                      v-for="item in group.options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-option-group>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="单价">
              <template v-slot="scope">
                <el-input disabled v-model="scope.row.goods_unit_price"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="参与折扣" width="80">
              <template v-slot="scope">
                <el-checkbox v-model="scope.row.discount"></el-checkbox>
              </template>
            </el-table-column>
            <el-table-column label="库存">
              <template v-slot="scope">
                <el-input disabled v-model='scope.row.goods_stoken'></el-input>
              </template>
            </el-table-column>
            <el-table-column label="数量(箱)">
              <template v-slot="scope">
                <el-input-number
                  style="width: 100px"
                  size="small"
                  v-model="scope.row.input_count"
                  @change="handleChange"
                  :min="1"
                ></el-input-number>
              </template>
            </el-table-column>
            <el-table-column label="商品总额">
              <template v-slot="scope">{{scope.row.input_count*scope.row.goods_unit_price}}</template>
            </el-table-column>
            <el-table-column label="操作">
              <template v-slot="scope">
                <el-button type="text" @click="del_pro(scope.$index)">移除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-row>
            <el-button type="text" @click="add_pro">添加</el-button>
          </el-row>
          <el-button type="text" disabled>收件信息</el-button>
          <el-form :inline="true"
           class="demo-form-inline"
            label-width="100px">
            <el-form-item label="收件人姓名">
              <el-input v-model="state.recive_obj.recive_man" placeholder="收件人姓名"></el-input>
            </el-form-item>
            <el-form-item label="联系电话">
              <el-input v-model="state.recive_obj.phone" placeholder="请输入联系电话"></el-input>
            </el-form-item>
            <el-form-item label="收货地址">
              <el-select v-model="state.recive_obj.address_id" placeholder="收货地址">
                <template v-for="adr in state.recive_obj.address_arr" :key="adr.name">
                  <el-option :label="adr.address" :value="adr.address"></el-option>
                </template>
              </el-select>
            </el-form-item>
          </el-form>
          <el-button type="text" disabled>其他信息</el-button>
          <el-form
            :inline="true"
            model="formInline"
            class="demo-form-inline"
            label-width="100px"
          >
            <el-form-item label="订单备注">
              <el-input v-model="state.set_form.note"></el-input>
            </el-form-item>
            <el-form-item label="折扣比例">
              <el-input v-model="state.set_form.discount" disabled></el-input>
            </el-form-item>
            <el-form-item label="修正金额">
              <el-input v-model="state.set_form.correct_price"></el-input>
            </el-form-item>
            <el-form-item label="运费">
              <el-input v-model="state.set_form.transfee"></el-input>
            </el-form-item>
            <el-form-item label="改价说明">
              <el-input v-model="state.set_form.change_note"></el-input>
            </el-form-item>
            <el-form-item label="送达时间">
             <el-date-picker v-model="state.set_form.deliver_time" @change="dateFun"></el-date-picker> -->
            </el-form-item>
            <el-form-item label="是否自提">
              <el-checkbox v-model="state.set_form.is_self"></el-checkbox>
            </el-form-item>
          </el-form>
          <el-row type="flex" justify="center">
            <el-col :span="12">共{{state.set_form.pro_table.length}}件商品，
              订单总金额： <s>{{double.sum}}</s> <span style="color:red;">{{double.new_total}}</span> </el-col>
          </el-row>
          <el-row
            type="flex"
            justify="space-around"
            style="margin: auto; margin-top: 26px; width: 20%"
          >
            <el-span :span="12"
              ><el-button @click="state.set_form.set_dialog = false"
                >取 消</el-button
              ></el-span
            >
            <el-span :span="12">
              <el-button type="primary" @click="confirm_create()"
                >提 交</el-button
              ></el-span
            >
          </el-row>
        </div>
      </el-drawer>
    </el-card>
  </div>
</template>

<script>
import {
  ref,
  reactive,
  onMounted,
  watch,
  computed,
  getCurrentInstance,
  provide,
} from "vue";
import { ElNotification } from "element-plus";
import { useRouter } from "vue-router";
import Dialog from "@/components/Dialog.vue";
import searchDiv from "@/components/Search.vue";
import Page from "@/components/Pagination.vue";
import Upload from "@/components/Upload.vue";
import Preview from "@/components/Preview_img.vue";
export default {
    name:"order_manager",
  components: {
    searchDiv,
    Page,
    Upload,
    Dialog,
    Preview,
  },
  props: {},
  setup() {
    const double=computed(()=>{
        let data=state.set_form.pro_table;
        let new_total=0;
        let sum=0;
        data.forEach((v)=>{
          sum+=(Number(v.goods_unit_price)*Number(v.input_count))
        })
        new_total=Number(sum)*Number(state.set_form.discount/100)+
        Number(state.set_form.correct_price)+Number(state.set_form.transfee)
      return {sum,new_total}
    })
    const show = ref(false);
    let opt_form = ref(null);
    let mutilform = ref("null");
    const router = useRouter();
    const { ctx } = getCurrentInstance();
    let state = reactive({
      set_form: {
        set_dialog: false,
        vip_type: "",
        vip_id: "",
        vip_name: "",
        vip_level: "",
        balance: "",
        pro_table: [],
        innerDrawer: false,
        totalPage: "",
        keyword: "",
        vipGroup: [],
        pro_select_arr: [],
        temp_data:[],
        note:'',
        discount:'',
        correct_price:0,
        transfee:0,
        change_note:'',
        deliver_time:'',
        is_self:false
      },
      recive_obj:{
          recive_man:'',
          phone:'',
          address_id:'',
          address_arr:[]
      },
      gift_id: "",
      gift_pro_arr: "",
      refund_dialog: false,
      refund: "",
      public_IMG_HOST: "",
      export_obj: {
        export_ware_arr: [],
        selected_arr: [],
      },
      export_dialog: false,
      order_type: "",
      order_type_arr: [],
      dls_type: "",
      dls_type_arr: [],
      show_window: false,
      placeholder: "请输入您要搜索的",
      common_id: "",
      waretype: "100",
      edit_log_dialog: false,
      fee_dialog: false,
      edit_form: {
        express_company: "",
        warehouse_arr: [],
        express_number: "",
        fee: "",
      },
      approve_dialogVisible: false,
      file_list: [],
      value1: [],
      begin_date: "",
      end_date: "",
      page: 1,
      totalPage: "",
      keywords: "",
      result: [],
      ruleForm: {
        chose_type: "",
        note: "",
      },
      rules: {
        chose_type: [
          { required: true, message: "请选择类型", trigger: "change" },
        ],
      },
      tran_obj: {
        keywrod: "",
        tran_data: [],
        select_arr: [],
      },
      approve: {
        send_type: true,
        current_show: "",
        express_company: "",
        express_data_arr: [],
        express_num: "",
        reason: "",
        reason_arr: [],
        password: "",
        title: "",
        current_type: "", //新订单
        order_detail: "",
        imgUrl: "",
      },
    });
    // 新建订单
    function set_order() {
      state.set_form.set_dialog = true;
      state.set_form.vip_type="";
      state.set_form.vip_id="";
      state.set_form.correct_price=0;
      state.recive_obj.recive_man="";
      state.recive_obj.phone="";
      state.recive_obj.address_id="";
      state.set_form.note="";
      state.set_form.discount="";
      state.set_form.change_note="";
      state.set_form.is_self=false;
      state.set_form.deliver_time="";
      state.set_form.pro_table=[];
      state.set_form.vip_name="";
      state.set_form.vip_level="";
      state.set_form.balance="";
      state.set_form.transfee=0;
      state.set_form.deliver_time="";

    }
    // 针对不同订单进行操作
    function approveBtn(item) {
      state.common_id = item.order_id;
      console.log(item.order_status_display);
      switch (item.order_status_display) {
        case "新订单":
          state.approve.current_show = "new_order";
          get_order_log(item.order_id);
          state.approve.express_num = "";
          state.approve.password = "";
          break;
        case "待审核":
          state.approve.current_show = "wait_check";
          break;
        case "待支付":
          state.approve.current_show = "wait_pay";
          break;
        case "已发货":
          state.approve.current_show = "confirm_recieve";
          break;
        case "已完成":
          state.approve.current_show = "over_order";
          get_detail_conTxt();
          break;
      }
      show.value = true;
    }
    // 撤销 or 发货
    function agreeChange(e) {
      console.log(e);
      if (!e) {
        get_cancle_reason();
      }
    }
    // 获取撤销的原因
    function get_cancle_reason() {
      ctx.$http
        .get("/tanxiaji/order_get_cancel_reason/", {})
        .then((res) => {
          if (res.errno == 0) {
            state.approve.reason_arr = res.data;
          } else {
            ElNotification.error(res.errmsg);
          }
        })
        .catch((err) => {
          ElNotification.error(err);
        });
    }
    // 新订单的请求物流
    function get_order_log(id) {
      ctx.$http
        .get("/tanxiaji/order/get_order_carrier/", {
          order_id: id,
        })
        .then((res) => {
          if (res.errno == 0) {
            state.approve.express_data_arr = res.data.express_list;
          } else {
            ElNotification.error(res.errmsg);
          }
        })
        .catch((err) => {
          ElNotification.error(err);
        });
    }
    // 新订单提交或者操作
    function sub_new_order_opt(type) {
      // true 发货  false 撤销
      console.log(type);
      let url = "",
        data = "",
        method = "";
      if (type) {
        url = "/tanxiaji/order/order_affirm/"; //发货
        data = {
          order_id: state.common_id,
          logistics: state.approve.express_company,
          logistics_bill: state.approve.express_num,
        };
      } else {
        url = "/tanxiaji/order_cancel/"; //撤销
        data = {
          order_id: state.common_id,
          cancle_reason: state.approve.reason,
          opt_pass: state.approve.password,
        };
      }
      console.log(url, data);
      ctx.$http
        .post(url, data)
        .then((res) => {
          if (res.errno == 0) {
            show.value = false;
            ElNotification.success(res.errmsg);
            getOrderlist();
          } else {
            ElNotification.error(res.errmsg);
          }
        })
        .catch((err) => {
          ElNotification.error(err);
        });
    }
    // 待审核单子提交
    function sub_wait_check() {
      ctx.$http
        .post("/tanxiaji/order_check/", {
          order_id: state.common_id,
        })
        .then((res) => {
          if (res.errno == 0) {
            show.value = false;
            ElNotification.success(res.errmsg);
            getOrderlist();
          } else {
            ElNotification.error(res.errmsg);
          }
        })
        .catch((err) => {
          ElNotification.error(err);
        });
    }
    // 待支付的单子提交
    function sub_wait_pay() {
      ctx.$http
        .post("/tanxiaji/order/order_pay/", {
          order_id: state.common_id,
        })
        .then((res) => {
          if (res.errno == 0) {
            show.value = false;
            ElNotification.success(res.errmsg);
            getOrderlist();
          } else {
            ElNotification.error(res.errmsg);
          }
        })
        .catch((err) => {
          ElNotification.error(err);
        });
    }
    // 待收货单子提交
    function sub_wait_pay() {
      ctx.$http
        .post("/tanxiaji/order_confirm/", {
          order_id: state.common_id,
        })
        .then((res) => {
          if (res.errno == 0) {
            show.value = false;
            ElNotification.success(res.errmsg);
            getOrderlist();
          } else {
            ElNotification.error(res.errmsg);
          }
        })
        .catch((err) => {
          ElNotification.error(err);
        });
    }
    // 获取订单详情内容
    function get_detail_conTxt() {
      ctx.$http
        .get("/tanxiaji/order/recipient_info/", {
          order_id: state.common_id,
        })
        .then((res) => {
          if (res.errno == 0) {
            state.approve.order_detail = res.data;
            state.approve.imgUrl = ctx.$http.IMG_HOST + res.data.head_img;
          } else {
            ElNotification.error(res.errmsg);
          }
        })
        .catch((err) => {
          ElNotification.error(err);
        });
    }
    // 监听子组件的关闭回调
    function flagFun(e) {
      show.value = e;
    }
    // 跳转页面
    function openPge(item) {
      let { href } = router.resolve({
        path: "/dispatch_order/",
        query: {
          keyword: item.order_number,
        },
      });
      window.open(href, "_blank");
    }
    // 打开转发货单弹窗
    function tran_order() {
      state.tran_order_dialog = true;
      get_already_ajax();
    }
    // 获取可以转发货单的数据
    function get_already_ajax() {
      ctx.$http
        .get("/tanxiaji/get_order_list/", {
          keyword: state.tran_obj.keyword,
          order_type: 5,
        })
        .then((res) => {
          if (res.errno == 0) {
            state.tran_obj.tran_data = res.order_list;
          } else {
            ElNotification.error(res.errmsg);
          }
        })
        .catch((err) => {
          ElNotification.error(err);
        });
    }
    // 转发货单的勾选
    function handleSelectionChange(e) {
      state.tran_obj.select_arr = e;
    }
    // 转发货单的搜索
    function tran_search(e) {
      state.tran_obj.keyword = e;
      get_already_ajax();
    }
    // 确定转发单
    function sub_tran_order() {
      let items = [];
      state.tran_obj.select_arr.filter((v) => items.push(v.order_id));
      if (!items.length) return ElNotification.error("请选择");
      ctx.$http
        .post("/tanxiaji/delivery/pull/", {
          order_ids: JSON.stringify(items),
        })
        .then((res) => {
          if (res.errno == 0) {
            state.tran_order_dialog = false;
            ElNotification.success(res.errmsg);
          } else {
            ElNotification.error(res.errmsg);
          }
        })
        .catch((err) => {
          ElNotification.error(err);
        });
    }
    // 退款
    function refundBtn(item) {
      state.refund_dialog = true;
      state.refund = "";
      state.common_id = item.order_id;
    }
    // 确认退款
    function confirm_refund() {
      ctx.$http
        .post("/tanxiaji/order_cancel/", {
          order_id: state.common_id,
          opt_pass: state.refund,
        })
        .then((res) => {
          if (res.errno == 0) {
            state.refund_dialog = false;
            ElNotification.success(res.errmsg);
            getOrderlist();
          } else {
            ElNotification.error(res.errmsg);
          }
        })
        .catch((err) => {
          ElNotification.error(err);
        });
    }
    // 转赠货弹窗
    function tranGift(item) {
      state.tran_gift_dialog = true;
      state.gift_pro_arr = item.goods_info;
      state.gift_id = "";
    }
    // 确认转赠货
    function confirm_gift() {
      if (!state.gift_id) return ElNotification.error("请选择在进行操作");
      ctx.$http
        .post("/tanxiaji/free_goods/add_free_goods_by_order", {
          order_item_id: state.gift_id,
        })
        .then((res) => {
          if (res.errno == 0) {
            state.tran_gift_dialog = false;
            ElNotification.success(res.errmsg);
            getOrderlist();
          } else {
            ElNotification.error(res.errmsg);
          }
        })
        .catch((err) => {
          ElNotification.error(err);
        });
    }
    // 导出
    function export_order() {
      state.export_dialog = true;
    }
    // 导出对话框的勾选
    function export_select(e) {
      state.export_obj.selected_arr = e;
    }
    // 提交导出
    function sub_export_order() {
      let data = state.export_obj.selected_arr;
      console.log(state.export_obj.selected_arr);
      let obj = {};
      data.forEach((v) => {
        if (v.export_id) {
          var arr = obj[v.export_id] || [];
          arr.push(v.order_id);
          obj[v.export_id] = arr;
        }
      });
      ctx.$http
        .post("/tanxiaji/export/hold_orders/", {
          data: JSON.stringify(obj),
        })
        .then((res) => {
          if (res.errno == 0) {
            state.export_dialog = false;
            ElNotification.success(res.errmsg);
            getOrderlist();
          } else {
            ElNotification.error(res.errmsg);
          }
        })
        .catch((err) => {
          ElNotification.error(err);
        });
    }
    // 打开物流弹窗
    function editLog(item) {
      state.edit_log_dialog = true;
      state.common_id = item.order_id;
      state.edit_form.express_number = item.logistics || "";
    }
    // 提交物流修改
    function sub_edit_log() {
      ctx.$http
        .post("/tanxiaji/order/change_logistics_info/", {
          order_id: state.common_id,
          logistics: state.edit_form.express_company,
          logistics_bill: state.edit_form.express_number,
        })
        .then((res) => {
          if (res.errno == 0) {
            state.edit_log_dialog = false;
            ElNotification.success(res.errmsg);
            getOrderlist();
          } else {
            ElNotification.error(res.errmsg);
          }
        })
        .catch((err) => {
          ElNotification.error(err);
        });
    }
    // 分页
    function changePage(e) {
      state.page = e;
      getOrderlist();
    }
    // 搜索框
    function searchClick(e) {
      console.log(e);
      state.keywords = e;
      getOrderlist();
    }
    onMounted(() => {
      state.public_IMG_HOST = ctx.$http.IMG_HOST;
      get_order_status();
      get_ware_ajax();
      getOrderlist();
    });
    // 获取仓库
    function get_ware_ajax() {
      ctx.$http
        .get("/tanxiaji/order/get_order_carrier/")
        .then((res) => {
          if (res.errno == 0) {
            state.edit_form.warehouse_arr = res.data.express_list;
          } else {
            ElNotification.error(res.errmsg);
          }
        })
        .catch((err) => {
          ElNotification.error(err);
        });
    }
    // 获取页面数据
    function getOrderlist() {
      ctx.$http
        .get("/tanxiaji/get_order_list/", {
          keyword: state.keywords,
          index: state.page,
          begin_date: state.begin_date,
          end_date: state.end_date,
          order_type: state.waretype,
          belong_type: state.order_type,
          belong_agent: state.dls_type,
        })
        .then((res) => {
          if (res.errno == 0) {
            let data = res.order_list;
            data.filter((item) => (item.export_id = ""));
            state.result = data;
            state.export_obj.export_ware_arr = res.delivery_templates; //导出的仓库
            state.totalPage = res.total_page_num;
          } else {
            ElNotification.error(res.errmsg);
          }
        })
        .catch((err) => {
          ElNotification.error(err);
        });
    }

    // 提交操作
    function optionBtn() {
      mutilform.value.validate((valid) => {
        if (valid) {
          let fileArr = [];
          state.file_list.filter((v) => fileArr.push(v.url));
          ctx.$http
            .post("/tanxiaji/delivery/refund/audit/", {
              order_id: state.common_id,
              status: state.ruleForm.chose_type,
              note: state.ruleForm.note,
              file_url_list: JSON.stringify(fileArr),
            })
            .then((res) => {
              ElNotification.success(res.errmsg);
              getOrderlist();
            })
            .catch((err) => {
              ElNotification.error(err);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }
    // vip搜索
    function vipSearch(e) {
      console.log(e);
      state.set_form.keywrod = e;
      get_vip_data();
    }
    // vip分页
    function vip_page(e) {
      state.set_form.page = e;
      get_vip_data();
    }
    // 点击某行的时候触发
    function rowClick(e) {
      
      state.set_form.vip_id = e.id;
      state.set_form.vip_name = e.customer_name;
      state.set_form.vip_level = e.customer_grade;
      state.set_form.balance = e.customer_balance;
      state.set_form.innerDrawer = false;
      get_vip_pro(e.id); //获取当前会员的商品
    }
    // 会员聚焦
    function open_child_drwer() {
      get_vip_data();
      state.set_form.innerDrawer = true;
    }
    // 获取vip的数据接口
    function get_vip_data() {
      ctx.$http
        .get("/tanxiaji/get_customer_list/", {
          customer_type: "store",
          page: state.set_form.page,
          keyword: state.set_form.keywrod,
        })
        .then((res) => {
          if (res.errno == 0) {
            console.log(res);
            state.set_form.vipGroup = res.data.customer_list;
            state.set_form.totalPage = res.data.total_page_num;
          } else {
            ElNotification.error(res.errmsg);
          }
        })
        .catch((err) => {
          ElNotification.error(err);
        });
    }
    // 获取当前会员的商品信息
    function get_vip_pro(id) {
      state.set_form.pro_table=[];
      state.set_form.pro_select_arr=[];
      ctx.$http
        .get("/tanxiaji/order_get_member_info/", {
          member_id: id,
          member_type: "store",
        })
        .then((res) => {
          console.log(res);
          if (res.errno == 0) {
            let receive=res.data.member_info;
            state.recive_obj.recive_man=receive.address_list[0].name;
            state.recive_obj.phone=receive.address_list[0].phone;
            state.recive_obj.address_arr=receive.address_list;
            state.set_form.discount=Number(receive.discount_value*100)
            let data=res.data.goods_list;
            let up_obj = {
              label: "已上架",
              options: [],
            };
            let down_obj = {
              label: "已下架",
              options: [],
            };
            data.forEach((v) => {
              v['selected']=JSON.parse(JSON.stringify(v.goods_id));
              v['discount']=true;
              v['input_count']=JSON.parse(JSON.stringify(v.goods_carton))
              if (v.shelf_status) {
                up_obj["options"].push({
                  label: v.goods_name,
                  value: v.goods_id,
                });
              } else {
                down_obj["options"].push({
                  label: v.goods_name,
                  value: v.goods_id
                });
              }
            });
            state.set_form.pro_select_arr.push(up_obj, down_obj);
            state.set_form.temp_data=JSON.parse(JSON.stringify(data));//暂存数据
            
            state.set_form.pro_table.push(data[0]);
          } else {
            ElNotification.error(res.errmsg);
          }
        })
        .catch((err) => {
          ElNotification.error(err);
        });
    }
    // 获取商品更改的数据
    function proChange(e,index){
      let data=state.set_form.temp_data.find((v)=>v.goods_id==e);
      state.set_form.pro_table.splice(index,1,data);
    }
    // 添加商品
    function add_pro(){
        let data=state.set_form.temp_data[0];
        state.set_form.pro_table.push(JSON.parse(JSON.stringify(data)));
    }
    // 移除
    function del_pro(idx){
        state.set_form.pro_table.splice(idx,1);
    }
    // 日历
    function dateFun(e){
       if (e != null) {
          state.set_form.deliver_time= dayjs().format("YYYY-MM-DD");
        }else{
          state.set_form.deliver_time="";
        }
    }
    // 确定创建
    function confirm_create(){
      let items=[];
      let arr=state.set_form.pro_table;
      arr.forEach((v)=>{
        let obj={
          selected_goods:v.goods_id,
          goods_count:v.input_count,
          goods_unitprice:v.goods_unit_price,
          goods_isdiscount:v.discount?'1':'0',
        }
        items.push(obj);
      })
      let data={
        member_type:state.set_form.vip_type,
        member_id:state.set_form.vip_id,
        order_amount:double.value.sum,
        discount_value:state.set_form.correct_price,
        receiver_name: state.recive_obj.recive_man,
        receiver_phone: state.recive_obj.phone,
        province: '',
        city: '',
        district: '',
        receiver_address: state.recive_obj.address_id,
        note: state.set_form.note,
        discount: (state.set_form.discount/100),
        change_note: state.set_form.change_note,
        is_oneself: state.set_form.is_self?'1':'0',
        expect_date: state.set_form.deliver_time,
        items:items
      }
      if(!items.length) return ElNotification.error("请操作后在提交");
      ctx.$http
        .post("/tanxiaji/order_real_create/",data)
        .then((res) => {
          console.log(res);
          if (res.errno == 0) {
            ElNotification.success(res.errmsg);
            state.set_form.set_dialog=false;
            getOrderlist();
          } else {
            ElNotification.error(res.errmsg);
          }
        })
        .catch((err) => {
          ElNotification.error(err);
        });
    }
    // 时间范围取值格式化
    function chooseTimeRange(e) {
      if (e != null) {
        state.begin_date = dayjs(e[0]).format("YYYY-MM-DD");
        state.end_date = dayjs(e[1]).format("YYYY-MM-DD");
      } else {
        state.begin_date = "";
        state.end_date = "";
      }
      getOrderlist();
    }
    // 运费弹窗
    function edit_fee(item) {
      state.fee_dialog = true;
      state.common_id = item.order_id;
      state.edit_form.fee = item.transport_fee || 0;
    }
    // 提交运费的接口
    function sub_fee() {
      ctx.$http
        .post("/tanxiaji/order/change_freigh/", {
          order_id: state.common_id,
          transport_fee: state.edit_form.fee,
        })
        .then((res) => {
          if (res.errno == 0) {
            state.fee_dialog = false;
            ElNotification.success(res.errmsg);
            getOrderlist();
          } else {
            ElNotification.error(res.errmsg);
          }
        })
        .catch((err) => {
          ElNotification.error(err);
        });
    }
    //获取订单类型
    function get_order_status() {
      ctx.$http
        .get("/tanxiaji/order/selection/", {})
        .then((res) => {
          state.order_type_arr = res.data.order_type;
          state.dls_type_arr = res.data.agent_list;
        })
        .catch((err) => {
          ElNotification.error(err);
        });
    }
    return {
      set_order,
      handleSelectionChange,
      sub_fee,
      sub_edit_log,
      mutilform,
      state,
      chooseTimeRange,
      getOrderlist,
      searchClick,
      approveBtn,
      optionBtn,
      agreeChange,
      editLog,
      edit_fee,
      changePage,
      tran_order,
      tran_search,
      sub_tran_order,
      export_order,
      sub_export_order,
      export_select,
      openPge,
      show,
      flagFun,
      sub_new_order_opt,
      opt_form,
      sub_wait_check,
      sub_wait_pay,
      refundBtn,
      confirm_refund,
      tranGift,
      confirm_gift,
      vipSearch,
      vip_page,
      get_vip_data,
      open_child_drwer,
      rowClick,
      proChange,
      add_pro,
      del_pro,
      double,
      confirm_create,
      dateFun
    };
  },
};
</script>
<style lang="scss" scoped>
.wrapper {
  height: 100%;
  .el-card {
    height: 100%;
    overflow-y: auto;
    .cart-title::before {
      content: " ";
      width: 4px;
      height: 20px;
      background: #1890ff;
      display: inline-block;
      vertical-align: middle;
      margin-right: 5px;
    }
    .rowDiv {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      .row-left {
        display: flex;
        width: 70%;
        justify-content: space-between;
        .row-item {
          display: flex;
          align-items: center;
          white-space: nowrap;
        }
      }
      .row-right {
        width: 15%;
        display: flex;
        justify-content: flex-end;
      }
    }
    .el-table /deep/ th {
      background-color: #eaeaea;
      text-align: center;
    }
    .el-table /deep/ td {
      text-align: center;
    }
    .el-select {
      width: 100%;
    }
    // 组装table
    .order-headr-fixed {
      width: 100%;
      border-collapse: collapse;
      margin-top: 10px;
      font-size: 13px;
      border: none;
      color: #909399;
      th {
        text-align: center;
        background: #eaeaea;
        padding: 8px 0;
        border: none;
      }
    }
    // 订单表格
    .order_list {
      .orderTb {
        width: 100%;
        border-collapse: collapse;
        border: none;
        font-size: 14px;
        margin-top: 8px;
      }
      .orderTb tr td {
        padding: 8px;
      }
      .orderTb tr th {
        padding: 0;
        border: none;
      }
      .orderTb:hover {
        background: #f7f8fa;
      }
      .p-double {
        background: #f7f8fa;
      }
      .navFlex {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #f7f8fa;
        .flexleft {
          display: flex;
          align-items: center;
          width: 84%;
          justify-content: space-between;
        }
        .flexright {
          cursor: pointer;
          color: rgb(46, 127, 181);
          position: relative;
          flex: 1;
          display: flex;
          justify-content: flex-end;
        }
      }
      .cssFlex {
        display: flex;
        justify-content: space-between;
        .logs-right {
          display: flex;
          flex-direction: column;
          justify-content: flex-end;
          .editLog {
            cursor: pointer;
            color: rgb(46, 127, 181);
          }
        }
      }
      .optionDiv {
        padding: 4px 0;
        cursor: pointer;
        color: rgb(46, 127, 181);
      }
      .optionDiv:hover {
        text-decoration: underline;
      }
    }
    .handDiv {
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center;
    }
  }
  ul {
    display: flex;
    flex-wrap: wrap;
    li {
      padding: 4px 0;
      margin-right: 5px;
      list-style: none;
    }
  }
}
</style>